import React, { Component } from 'react'
import { connect } from 'react-redux'
import ReplayPlayer from '@utils/ReplayPlayer'
import PlayController from '@utils/PlayController'
import { originData, EventCenter, cloneDeep } from '@utils/Global'
import { ReplayAction } from '@act'
const { toggleShowType, updateFooter, changeSwiperIndex, setReplayDmList } = ReplayAction

class MiddleBtn extends Component {
  componentDidMount() {
    EventCenter.addListener('re_get_replay_audio', this.startReplay)
  }
  componentWillUnmount() {
    EventCenter.removeListener('re_get_replay_audio', this.startReplay)
  }
  clickBtn = () => {
    const { showStart, showEnd, dispatch } = this.props
    if (showStart) {
      this.startReplay()
    }
    if (showEnd) {
      this.startReplaySecond()
    }
  }
  startReplay = () => {
    const { audio } = originData['replay']
    const { dispatch } = this.props
    dispatch(toggleShowType('startBtn', false))
    dispatch(toggleShowType('mediaLoading', true))
    ReplayPlayer.load(audio.url, 0, () => {
      dispatch(toggleShowType('mediaLoading', false))
      ReplayPlayer.start()
      PlayController.start()
      dispatch(updateFooter('isPause', false))
    }, () => {
      console.log('audio end')
      dispatch(toggleShowType('footer', false))
      dispatch(toggleShowType('endBtn', true))
      ReplayPlayer.pause()
      PlayController.stop()
      EventCenter.emit('audio_ended')
    }, () => {
      dispatch(toggleShowType('startBtn', true))
      dispatch(toggleShowType('mediaLoading', false))
      dispatch(toggleShowType('mediaError', true))
      console.log('load err')
    })
  }
  startReplaySecond() {
    const { dispatch } = this.props
    this.resetDm()
    PlayController.resetInitData()
    dispatch(updateFooter('currentTime', 0))
    dispatch(toggleShowType('endBtn', false))
    dispatch(toggleShowType('toQaBtn', false))
    dispatch(toggleShowType('mediaLoading', true))
    ReplayPlayer.seekTo(0, () => {
      dispatch(changeSwiperIndex(0))
      dispatch(toggleShowType('mediaLoading', false))
      ReplayPlayer.start()
      PlayController.start()
    })
  }
  resetDm() {
    const { dispatch, dmList } = this.props
    var allDm = cloneDeep(dmList)
    var unShowDm = allDm.map((_) => {
      return Object.assign({}, _, {
        show: false
      })
    })
    dispatch(setReplayDmList(unShowDm))
  }
  renderIcon() {
    const { showStart, showEnd } = this.props
    const icon = showStart ? require('@images/replay_play_icon.png') : require('@images/replay_icon.png')
    if (showEnd) {
      return (
        <div className="loading_media_with_text">
          <img onClick={this.clickBtn} className="loading_media_with_text_image" src={icon} alt=""/>
          <div className="loading_media_with_text_text">点击重播</div>
        </div>
      )
    }
    if (showStart) {
      return (
        <img onClick={this.clickBtn} className="loading_media_image action_btn" src={icon} alt=""/>
      )
    }
    return null
  }
  render() {
    const { showStart, showEnd, cover } = this.props
    const show = showStart || showEnd
    return (
      <div className="loading_media" style={{display: show ? 'block' : 'none'}}>
        <div className="loading_media_bg" style={{ backgroundImage: 'url(' + cover + ')' }}></div>
        <div className="loading_media_mask">
          { this.renderIcon() }
        </div>
      </div>
    )
  }
}

const mapState = (state) => {
  return {
    showStart: state.ReplayState.showType.startBtn,
    showEnd: state.ReplayState.showType.endBtn,
    dmList: state.ReplayState.dmList,
    cover: state.MainScreenState.info.cover
  }
}

export default connect(mapState)(MiddleBtn)
